<template>
  <div class="app-container pg-oms-order-edit">
    <el-form ref="orderForm" class="order-form" label-width="86px" size="small" :model="orderForm" :rules="rules" :show-message="false">
      <!-- 基本信息 begin -->
      <div class="part-box" :class="{'hide':!partShow1}">
        <div class="part-title">
          <h4 class="title-name">基本信息</h4>
          <el-tooltip :content="`点击${partShow1?'显示':'折叠'}`" placement="left">
            <el-button class="tooltip-btn" icon="el-icon-arrow-down" round @click="handelPartShow(1)"></el-button>
          </el-tooltip>
        </div>
        <div class="part-content">
          <el-row :gutter="10">
            <!-- <el-col v-if="orderId!='new'" :span="6">
              <el-form-item label="订单号" prop="orderCode">
                <el-input v-model="orderForm.orderCode" disabled />
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="客户名称" prop="product">
                <dg-service-select
                  placeholder="请选择客户"
                  v-model="orderForm.product"
                  :dataType="20000"
                  isObject
                  filterable
                  clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户订单" prop="orderNo">
                <el-input v-model="orderForm.orderNo" placeholder="请输入客户订单号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物流单号" prop="referenceNo">
                <el-input v-model="orderForm.referenceNo" placeholder="请输入物流单号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="转单号" prop="carrierBustNo">
                <el-input v-model="orderForm.carrierBustNo" placeholder="请选择转单号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仓库名称" prop="warehouse">
                <el-select v-model="orderForm.warehouse" placeholder="请选择仓库名称" clearable>
                  <el-option :value="1" label="敏亚深圳仓"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运输产品" prop="product">
                <dg-service-select
                  placeholder="请选择运输产品"
                  v-model="orderForm.product"
                  :dataType="20002"
                  isObject
                  filterable
                  clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="cargoType" label="包裹类型">
                <dg-dict-select dictType="cargo_type" placeholder="请选择包裹类型" v-model="orderForm.cargoType" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="cargoType" label="包裹类型">
                <dg-dict-select dictType="cargo_type" placeholder="请选择包裹类型" v-model="orderForm.cargoType" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="waybillDate" label="发货日期">
                <el-date-picker v-model="orderForm.waybillDate" type="date" placeholder="选择日期" format="yyyy-MM-dd" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预报重量" prop="goodsWeight">
                <el-input type="number" v-model="orderForm.goodsWeight" placeholder="请输入预报重量">
                  <template slot="append">kg</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="货物件数" prop="waybillPiece">
                <el-input type="number" v-model.number="orderForm.waybillPiece" placeholder="货物件数" :min="1" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="货物退回" prop="waybillReturnsign">
                <el-switch v-model="orderForm.waybillReturnsign" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="报关服务" prop="isDeclare">
                <el-switch v-model="orderForm.isDeclare" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="代收货款COD" prop="isCod">
                <el-switch v-model="orderForm.isCod" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="保险金额" prop="waybillInsurance">
                <el-input v-model="orderForm.waybillInsurance" placeholder="请输入保险金额" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电池类型" prop="batteryType">
                <dg-dict-select dictType="battery_type" placeholder="请选择电池类型" v-model="orderForm.batteryType" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关税类型" prop="tariffType">
                <dg-dict-select dictType="tariff_type" placeholder="请选择关税类型" v-model="orderForm.tariffType" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="其他金额" prop="waybillCargoamount">
                <el-input v-model="orderForm.waybillCargoamount" placeholder="选填，用于DHL运费或其他用途" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="销售地址" prop="waybillTransactionurl">
                <el-input v-model="orderForm.waybillTransactionurl" placeholder="请输入销售地址" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="图片地址" prop="productImagepath">
                <el-input v-model="orderForm.productImagepath" placeholder="图片url地址" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单备注" prop="remarks">
                <el-input type="textarea" rows="1" v-model="orderForm.remarks" placeholder="请订单备注" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 基本信息 end -->
      <!-- 发件人信息 begin -->
      <div class="part-box" :class="{'hide':!partShow2}">
        <div class="part-title">
          <h4 class="title-name">发件人信息</h4>
          <el-tooltip :content="`点击${partShow2?'显示':'折叠'}`" placement="left">
            <el-button class="tooltip-btn" icon="el-icon-arrow-down" round @click="handelPartShow(2)"></el-button>
          </el-tooltip>
        </div>
        <div class="part-content">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="发件人" prop="shipperName">
                <el-input v-model="orderForm.shipperName" placeholder="请输入发件人名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件公司" prop="shipperCompanyname">
                <el-input v-model="orderForm.shipperCompanyname" placeholder="请输入发件公司" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件国家" prop="shipperCountry">
                <dg-service-select
                  placeholder="请选择发件国家"
                  v-model="orderForm.shipperCountry"
                  :dataType="20001"
                  isObject
                  filterable
                  remote
                  clearable
                  @change="selectChange($event, 'shipperCountry')" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件州/省" prop="shipperState">
                <el-input v-model="orderForm.shipperState" placeholder="发件州/省(二字码)" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件城市" prop="shipperCity">
                <el-input v-model="orderForm.shipperCity" placeholder="发件城市" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件区" prop="shipperSuburb">
                <el-input v-model="orderForm.shipperSuburb" placeholder="发件区" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="mb0" label="街道/门牌">
                <el-col :span="12">
                  <el-form-item prop="shipperStreetno" label-width="0">
                    <el-input v-model="orderForm.shipperStreetno" placeholder="街道" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="shipperDoorno" label-width="0">
                    <el-input v-model="orderForm.shipperDoorno" placeholder="门牌号" clearable />
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件电话" prop="shipperPhone">
                <el-input v-model="orderForm.shipperPhone" placeholder="发件电话" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件邮箱" prop="shipperEmail">
                <el-input v-model="orderForm.shipperEmail" placeholder="发件邮编" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件邮编" prop="shipperPostcode">
                <el-input v-model="orderForm.shipperPostcode" placeholder="发件邮编" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发件地址1" prop="shipperAddress1">
                <el-input v-model="orderForm.shipperAddress1" placeholder="发件地址1" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发件地址2" prop="shipperAddress2">
                <el-input v-model="orderForm.shipperAddress2" placeholder="发件地址2" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发件地址3" prop="shipperAddress3">
                <el-input v-model="orderForm.shipperAddress3" placeholder="发件地址3" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="shipperTaxnocountry" label="税号国家">
                <dg-service-select
                  placeholder="请选择税号国家"
                  v-model="orderForm.shipperTaxnocountry"
                  :dataType="20001"
                  isObject
                  filterable
                  remote
                  clearable
                  @change="selectChange($event, 'shipperTaxnocountry')" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="shipperTaxno" label="税号">
                <el-input placeholder="请输入税号" v-model="orderForm.shipperTaxno">
                  <dg-dict-select
                    slot="prepend"
                    class="w-80"
                    dictType="taxno_type"
                    placeholder="税号类别"
                    v-model="orderForm.shipperTaxnotype" />
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="shipperPassportno" label="护照号">
                <el-input v-model="orderForm.shipperPassportno" placeholder="发件人护照号" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 发件人信息 end -->
      <!-- 收件人信息 begin -->
      <div class="part-box" :class="{'hide':!partShow3}">
        <div class="part-title">
          <h4 class="title-name">收件人信息</h4>
          <el-tooltip :content="`点击${partShow3?'显示':'折叠'}`" placement="left">
            <el-button class="tooltip-btn" icon="el-icon-arrow-down" round @click="handelPartShow(3)"></el-button>
          </el-tooltip>
        </div>
        <div class="part-content">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="收件人" prop="consigneeName">
                <el-input v-model="orderForm.consigneeName" placeholder="请输入收件人名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeCompanyname" label="收件公司">
                <el-input v-model="orderForm.consigneeCompanyname" placeholder="收件公司" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeCountry" label="收件国家">
                <dg-service-select
                  placeholder="请选择收件国家"
                  v-model="orderForm.shipperCountry"
                  :dataType="20001"
                  isObject
                  filterable
                  remote
                  clearable
                  @change="selectChange($event, 'consigneeCountry')" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeState" label="收件州/省">
                <el-input v-model="orderForm.consigneeState" placeholder="收件人州/省(二字码)" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeCity" label="收件城市">
                <el-input v-model="orderForm.consigneeCity" placeholder="收件城市" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeSuburb" label="收件区">
                <el-input v-model="orderForm.consigneeSuburb" placeholder="收件区" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="mb0" label="街道/门牌">
                <el-col :span="12">
                  <el-form-item prop="consigneeStreetno" label-width="0">
                    <el-input v-model="orderForm.consigneeStreetno" placeholder="街道" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="consigneeDoorno" label-width="0">
                    <el-input v-model="orderForm.consigneeDoorno" placeholder="门牌号" clearable />
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeEmail" label="收件邮箱">
                <el-input v-model="orderForm.consigneeEmail" placeholder="收件人邮箱" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="mb0" label="收件电话">
                <el-col :span="15">
                  <el-form-item label-width="0" prop="consigneeTelephone">
                    <el-input v-model="orderForm.consigneeTelephone" placeholder="收件人电话" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label-width="0" prop="consigneeMobile">
                    <el-input v-model="orderForm.consigneeMobile" placeholder="选填，收件手机" clearable />
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneePostcode" label="收件邮编">
                <el-input v-model="orderForm.consigneePostcode" placeholder="收件人邮编" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="consigneeAddress" label="收件地址">
                <el-input v-model="orderForm.consigneeAddress" placeholder="收件地址" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item prop="consigneeTaxnocountry" label="税号国家">
                <dg-service-select
                  placeholder="请选择税号国家"
                  v-model="orderForm.consigneeTaxnocountry"
                  :dataType="20001"
                  isObject
                  filterable
                  remote
                  clearable
                  @change="selectChange($event, 'consigneeTaxnocountry')" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeTaxno" label="税号">
                <el-input placeholder="请输入税号" v-model="orderForm.consigneeTaxno" clearable>
                  <dg-dict-select
                    slot="prepend"
                    class="w-80"
                    dictType="taxno_type"
                    placeholder="税号类别"
                    v-model="orderForm.consigneeTaxnotype" />
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneePassportno" label="护照号">
                <el-input v-model="orderForm.consigneePassportno" placeholder="收件人护照号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneePassportSequence" label="护照序列">
                <el-input v-model="orderForm.consigneePassportSequence" placeholder="收件人护照序列" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item prop="consigneePassportAuthority" label="护照签发机构">
                <el-input v-model="orderForm.consigneePassportAuthority" placeholder="收件人护照签发机构" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneePassportDate" label="护照签发日期">
                <el-date-picker
                  type="date"
                  v-model="orderForm.consigneePassportDate"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeBirthday" label="生日">
                <el-date-picker
                  type="date"
                  v-model="orderForm.consigneeBirthday"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="consigneeStoreCode" label="店铺代码">
                <el-input v-model="orderForm.consigneeStoreCode" placeholder="店铺代码" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item prop="consigneeStoreName" label="店铺名称">
                <el-input v-model="orderForm.consigneeStoreName" placeholder="收件人店铺名称" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 发件人信息 end -->
      <!-- 商品信息 begin -->
      <div class="part-box" :class="{'hide':!partShow4}">
        <div class="part-title">
          <h4 class="title-name">商品信息</h4>
          <el-tooltip :content="`点击${partShow4?'显示':'折叠'}`" placement="left">
            <el-button class="tooltip-btn" icon="el-icon-arrow-down" round @click="handelPartShow(4)"></el-button>
          </el-tooltip>
        </div>
        <div class="part-content pb12">
          <el-table ref="packageTable" class="part-table" :data="orderForm.packageList" border>
            <el-table-column min-width="60" align="center" label="行号" prop="lineNo" fixed />
            <el-table-column min-width="100" align="center" label="包装类型" prop="packageType" />
            <el-table-column min-width="100" align="center" label="数量" prop="quantity" />
            <el-table-column min-width="100" align="center" label="⻓宽⾼单位" prop="unit" />
            <el-table-column min-width="120" align="center" label="长*宽*高">
              <template slot-scope="scope">
                <div class="over-tooltip">
                  {{ scope.row.length }} * {{ scope.row.width }} * {{ scope.row.height }}
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="100" align="center" label="重量单位" prop="weightUnit" />
            <el-table-column min-width="100" align="center" label="单个包裹重" prop="weight" />
            <el-table-column min-width="120" align="center" label="长*宽*高(入库)">
              <template slot-scope="scope">
                <div v-if="scope.row.scanLength" class="over-tooltip">
                  {{ scope.row.scanLength }} * {{ scope.row.scanWidth }} * {{ scope.row.scanHeight }}
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="88" align="center" label="入库重" prop="scanWeight" />
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <div class="opera-row">
                  <el-button class="opera-item" type="text" @click="handleAddItem()">添加</el-button>
                  <el-button class="opera-item" type="text" @click="handleDelItem(scope.$index)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 商品信息 end -->
      <!-- 产品信息 begin -->
      <div class="part-box" :class="{'hide':!partShow5}">
        <div class="part-title">
          <h4 class="title-name">产品信息</h4>
          <el-tooltip :content="`点击${partShow5?'显示':'折叠'}`" placement="left">
            <el-button class="tooltip-btn" icon="el-icon-arrow-down" round @click="handelPartShow(5)"></el-button>
          </el-tooltip>
        </div>
        <div class="part-content pb12">
          <el-table ref="productTable" class="part-table" :data="orderForm.productList" border>
            <el-table-column min-width="100" align="center" label="中文名" prop="productName" />
            <el-table-column min-width="100" align="center" label="英文名" prop="productNameEn" />
            <el-table-column min-width="100" align="center" label="产品数量" prop="productQuantity">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="数量单位" prop="productUnit" />
            <el-table-column min-width="100" align="center" label="HS编码" prop="hsCode" />
            <el-table-column min-width="100" align="center" label="申报单价" prop="declarationPrice" />
            <el-table-column min-width="78" align="center" label="是否带电">
              <template slot-scope="scope">
                <div class="over-tooltip">{{ scope.row.hasBattery | filterDict(dict.type['yes_no']) }}</div>
              </template>
            </el-table-column>
            <el-table-column min-width="88" align="center" label="材质" prop="material" />
            <el-table-column min-width="88" align="center" label="材质" prop="purpose" />
          </el-table>
        </div>
      </div>
      <!-- 产品信息 end -->
    </el-form>
    <!-- fixed-footer begin -->
    <div class="h-66"></div>
    <div class="fixed-footer">
      <el-button type="primary" :loading="btnLoading" @click="pageSubmit(0)">保存</el-button>
      <el-button v-if="orderId == 'new'" type="primary" :loading="btnLoading" @click="pageSubmit(1)">保存并继续</el-button>
      <el-button v-if="orderId == 'new'" @click="resetPage()">重置</el-button>
    </div>
    <!-- fixed-footer end -->
  </div>
</template>
<script>
import mixin from '@/utils/filtermixin/mixin';
import * as API_Order from '@/api/oms/order';

export default {
  name: 'pg-oms-order-edit',
  mixins: [mixin],
  data() {
    return {
      orderId: undefined,
      partShow1: true,
      partShow2: true,
      partShow3: true,
      partShow4: true,
      partShow5: true,
      // 发件人选项
      shipperOption: [],
      // 收件人选项
      consigneeOption: [],
      orderForm: {
        id: undefined,
        orderCode: undefined,
        referenceNo: undefined,
        product: undefined,
        warehouse: 1,
        carrierBustNo: undefined,
        remarks: undefined,
        consignorName1: undefined,
        shipperCompanyname: undefined,
        consignorMobile: undefined,
        shipperPhone: undefined,
        shipperEmail: undefined,
        consignorStreet1: undefined,
        consignorStreet2: undefined,
        shipperCountry: undefined,
        shipperCity: undefined,
        shipperPostcode: undefined,
        shipperSuburb: undefined,
        shipperState: undefined,
        consignee1: undefined,
        consignee2: undefined,
        consigneeMobile: undefined,
        consigneeTelephone: undefined,
        consigneeEmail: undefined,
        consigneeStreet1: undefined,
        consigneeStreet2: undefined,
        consigneeCountryCode: undefined,
        consigneeCity: undefined,
        consigneePostalCode: undefined,
        consigneeStateRegionCode: undefined,
        consigneeProvince: undefined,
        packageList: [{}],
        productList: [{}]
      },
      rules: {},
      btnLoading: false
    };
  },
  created () {
    // 获取页面Id
    let { id } = this.$route.params;
    this.orderId = id;
  },
  mounted() {
    if (this.orderId !== 'new') {
      this.getPageData();
    };
  },
  methods: {
    /**
      * @date 2025/07/18
      * @author wolfMan
      * @description {模块展开/收起}
    */
    handelPartShow (_type) {
      this[`partShow${_type}`] = !this[`partShow${_type}`];
    },
    /**
      * @date 2025/07/18
      * @author wolfMan
      * @description {获取页面详情}
    */
    getPageData() {
      API_Order.getDetailService(this.orderId).then(response => {
        let { bookOrder, product, apackage } = response.data || {};
        this.orderForm = {
          ...bookOrder,
          productList: product || [],
          packageList: apackage || []
        };
        console.log(this.orderForm);
      });
    },
    /**
      * @date 2025/07/18
      * @author wolfMan
      * @description {下拉框选择}
    */
    selectChange (_value) {
      console.log(_value);
    },
    /**
      * @date 2025/07/18
      * @author wolfMan
      * @description {}
    */
    handleAddItem () {},
    /**
      * @date 2025/07/18
      * @author wolfMan
      * @description {}
    */
    handleDelItem () {},
    /**
      * @date 2025/07/18
      * @author wolfMan
      * @description {页面信息提交}
    */
    pageSubmit (_type) {
      console.log(_type);
    }
  }
};
</script>

<style lang="scss" scoped>
.pg-oms-order-edit {
  padding: 0;
  background: #f0f4f9;

  .like-table-box {
    .like-tr {
      display: flex;
      border: solid 1px #dfe6ec;

      .like-td {
        padding: 8px 10px;
        line-height: 20px;

        &+.like-td {
          border-left: solid 1px #dfe6ec;
        }

        &.label {
          width: 76px;
          color: #515152;
        }

        &.value {
          flex: 1;
          min-width: 0;
          color: #515152;
        }
      }

      &+.like-tr {
        border-top: none;
      }
    }
  }

  .part-box {
    ::v-deep .el-form-item {
      margin-bottom: 12px;

      .el-form-item__label {
        padding-right: 10px;
      }

      .el-form-item__label,
      .el-checkbox__label {
        font-size: 12px;
      }

      .el-form-item__content {
        line-height: 0;
      }
    }
  }

  ::v-deep .el-table {
    &__body-wrapper td {
      padding: 6px 0 !important;

      .el-form-item {
        margin-bottom: 0;
      }
    }

    &__expand-column .cell {
      padding: 0;
    }

    .rowTable {
      padding: 15px 20px 6px 20px;
      margin: -6px 0;
      background: #ebeef5;

      // font-size: smaller;
      .el-form-item {
        margin-bottom: 10px !important;
      }
    }

    .box-goods-part {
      margin: -7px -1px -6px 0;
      padding: 0 0 10px 47px;

      // background: #dfe6ec;
      .part-title {
        margin-bottom: 10px;
      }

      .el-table__header-wrapper {
        .has-gutter {
          th {
            height: 36px;

            .cell {
              font-size: 12px;
            }
          }
        }
      }

      .el-table__footer-wrapper {
        .has-gutter {
          td {
            padding: 0 !important;
            background: #dfe6ec;
          }
        }
      }
    }
  }
}
</style>
